<template>
	<fu-index-list :index-list="indexList">
		<template v-slot:header>
			<view style="height: 100px;background-color: #3c9cff;">头部内容</view>
		</template>
		<template v-for="(item, index) in list">
			<!-- #ifdef APP-NVUE -->
			<fu-index-anchor :text="indexList[index]"></fu-index-anchor>
			<!-- #endif -->
			<fu-index-item>
				<!-- #ifndef APP-NVUE -->
				<fu-index-anchor :text="indexList[index]"></fu-index-anchor>
				<!-- #endif -->
				<view class="list-cell" v-for="(cell, index) in item">
					{{cell}}
				</view>
			</fu-index-item>
		</template>
	</fu-index-list>
</template>

<script setup>
	import { ref } from 'vue';
	// regions
	
	// data数据
	const indexList = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
	const list = [
		['列表A1', '列表A2', '列表A3'],
		['列表B1', '列表B2', '列表B3'],
		['列表C1', '列表C2', '列表C3'],
		['列表D1', '列表D2', '列表D3'],
		['列表E1', '列表E2', '列表E3'],
		['列表F1', '列表F2', '列表F3'],
		['列表G1', '列表G2', '列表G3']
	];
</script>

<style lang="scss" scoped>
	.list-cell {
		/* #ifndef APP-PLUS */
		display: flex;
		box-sizing: border-box;
		width: 100%;
		/* #endif */
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>